<template>
  <div class="head-wrap" style="color: #fff" v-show="showHead">
    <div class="head-content">
      <div class="left">
        <img
          src="../assets/images/logo1.png"
          class="logo_wrap"
          @click="goToPage('index')"
          alt=""
        />
      </div>

      <div class="right" v-show="showTitle">
        <div class="wallet_box">
          <div class="linkAddress">
            {{ splitAddress(store.state.address,8) }}
          </div>
        </div>
        <van-popover v-model:show="showPopover2" placement="bottom-end">
              <div class="language_box">
            <div class="language_item" v-if="nowSystem!='/c2c'" :class="{ language_item_active: router.currentRoute.value.name == 'index' }" @click="goToPage('index')">
              <i class="iconfont item_icon icon-ic_daifahuo1"></i>
              {{ t('allOrder') }}
            </div>

            <div class="language_item"  v-if="nowSystem!='/index'"  :class="{ language_item_active: router.currentRoute.value.name == 'c2c' }" @click="goToPage('c2c')">
              <i class="iconfont item_icon icon-ic_gold"></i>
              {{ t('c2cOrder') }}
            </div>

            <div class="language_item" v-if="nowSystem!='/c2c'" :class="{ language_item_active: router.currentRoute.value.name == 'myOrder' }" @click="goToPage('myOrder')">
              <i class="iconfont item_icon icon-ic_daifukuan1"></i>
              {{ t('myLoan') }}
            </div>
            <div class="language_item" v-if="nowSystem!='/index'"  :class="{ language_item_active: router.currentRoute.value.name == 'myC2C' }" @click="goToPage('myC2C')">
              <i class="iconfont item_icon icon-shouyi1"></i>
              {{ t('myC2C') }}
            </div>
            
            <div class="language_item" v-if="nowSystem!='/index'"  :class="{ language_item_active: router.currentRoute.value.name == 'myRecord' }" @click="goToPage('myRecord')">
              <i class="iconfont item_icon icon-daifahuo"></i>
              {{ t('myRecord') }}
            </div>
            <div class="language_item" v-if="store.state.myShop.account=='0x0000000000000000000000000000000000000000'" :class="{ language_item_active: router.currentRoute.value.name == 'applyShop' }" @click="goToPage('applyShop')">
              <i class="iconfont item_icon icon-ic_store-2"></i>
              {{ t('applyShop') }}
            </div>
            <div v-else class="language_item" :class="{ language_item_active: router.currentRoute.value.name == 'shopOrder' }" @click="goToPage('shopOrder')">
              <i class="iconfont item_icon icon-ic_store-2"></i>
              {{ t('shop') }}
              <span v-if="store.state.myShop.status==0"> ({{ t('auditing')}})</span>
              <span v-if="store.state.myShop.status==2"> ({{ t('hasOut')}})</span>
              <span v-if="store.state.myShop.status==3"> ({{ t('hasRefuse')}})</span>
            </div>
            <div v-if="store.state.isAdmin" class="language_item" :class="{ language_item_active: router.currentRoute.value.name == 'auditShop' }" @click="goToPage('auditShop')">
              <i class="iconfont item_icon icon-a-ic_customerservice1"></i>
              {{ t('adminer') }}
            </div>
            <div v-if="store.state.isAdmin" class="language_item" :class="{ language_item_active: router.currentRoute.value.name == 'adminTime' }" @click="goToPage('adminTime')">
              <i class="iconfont item_icon icon-a-ic_customerservice1"></i>
              {{ t('adminTime') }}
            </div>
            
            <div class="language_item" :class="{ language_item_active: router.currentRoute.value.name == 'myStar' }" @click="goToPage('myStar')">
              <i class="iconfont item_icon icon-ic_collection"></i>
              {{ t('myStar') }}
            </div>
            <div class="language_item" :class="{ language_item_active: router.currentRoute.value.name == 'user' }" @click="goToPage('user')">
              <i class="iconfont item_icon icon-ic_user-2"></i>
              {{ t('userDetail') }}
            </div>
            <div>
                      <van-popover v-model:show="showPopover" placement="bottom-end">
          <div class="language_box">
            <div class="language_item" :class="{ language_item_active: locale == 'zh' }" @click="changeLang('zh')">
              <van-image round fit="cover" :src="requireImg('zh.svg')" />
              简体中文
            </div>
            <div class="language_item" :class="{ language_item_active: locale == 'en' }" @click="changeLang('en')">
              <van-image round fit="cover" :src="requireImg('en.svg')" />
              English
            </div>
          </div>
          <template #reference>
            <div class="language_item">
              <i  :style="{ color: store.state.theme == 'dark' ? '#fff' : '#000' }" class="item_icon iconfont icon-duoyuyan"></i>
              {{locale == 'zh'?'简体中文':'English'}}
            </div>
          </template>
        </van-popover>
            </div>
          </div>
             <template #reference>
              <div class="change_order">
                  <i
            :style="{ color: store.state.theme == 'dark' ? '#fff' : '#000' }"
            class="iconfont icon-chakanxiangqinggengduo"
          ></i>
          </div>
          </template>
        </van-popover> 
    

      </div>
    </div>
     <set-dialog v-model="showSetDialog"></set-dialog>
  </div>
</template>
<script setup>
import { useStore } from "vuex";
import { ref, reactive, onMounted, computed } from "vue";
import { useI18n } from "vue-i18n";
const { locale, t } = useI18n();
import {nowSystem } from "@/utils/config"
 import { useRouter } from "vue-router";
const router = useRouter();
const store = useStore();
const props = defineProps({
  messageSum: {
    type: [String, Number],
    default: 0,
  },
  url: {
    type: String,
    default: "",
  },
  shop: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "",
  },
});
const showSetDialog = ref(false);
const requireImg = (imgPath) => {
  return new URL(`../assets/images/${imgPath}`, import.meta.url).href;
};
const showPopover = ref(false);
const goToPage = (value) => {
  let query = {}
  if(value=='shopOrder'){
    if(store.state.myShop.status==1){
    }else{
      return
    }
    query={
      self:1
    }
  }
  router.push({
    name: value,
    query
  });
  showPopover2.value = false
  showPopover.value = false;
};
const showHead = computed(() => {
  return ["index","myOrder",'c2c'].includes(router.currentRoute.value.name);
});
const showTitle = computed(() => {
  return !["sellerDetail"].includes(router.currentRoute.value.name);
});
const showPopover2 = ref(false);
document.documentElement.classList.add(
  `van-doc-theme-dark`
);
document.documentElement.classList.add(
  "dark_theme"
);
store.commit("addTheme",  "dark" );
locale.value = window.localStorage.getItem("languageStatus") || "zh";
const changeLang = (value) => {
  locale.value = value;
  window.localStorage.setItem("languageStatus", value);
  showPopover.value = false;
};
const splitAddress = (address) => {
  if (address) {
    return (
      address.slice(0, 7) +
      "..." +
      address.slice(address.length - 4, address.length)
    );
  } else {
    return t("linkWallet");
  }
};
</script>
<style>
.van-popover__content{
  border:1px solid #666 !important;
}</style>
<style lang="scss" scoped>
.change_order{
  margin-left: 6px;
}
.item_icon{
  margin-right: 5px;
  font-size: 12px;
}
.head-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  z-index: 3;
  .menu_set {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .head-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;

    .logo_wrap {
      display: inline-block;
      height: 20px;
    }

    .left {
      display: flex;
      align-items: center;

      .set_icon {
        font-size: 24px;
        color: #fff;
        margin-right: 5px;
        cursor: pointer;
      }
    }

    .right {
      align-items: center;
      height: 0.74667rem;
      font-size: 0.4rem;
      font-weight: 500;
      color: #1e3566;
      display: flex;
      align-items: center;
      .wallet_box {
        margin-right: 2px;
        color: #fff;
        background-color: #fe9802;
        overflow: hidden;
        font-size: 11px;
        padding: 0 6px;
        min-width: 64px;
        box-sizing: border-box;
        height: 20px;
        text-align: center;
        transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0ms,
          box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0ms,
          border 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0ms;
        font-weight: 500;
        line-height: 20px;
        border-radius: 14px;
        text-transform: none;
      }

      .light {
        color: #fff;
      }

      .dark {
        font-size: 16px;
      }
    }
  }
}

.themeChange {
  margin-right: 8px;
}

.linkAddress {
  color: #fff;
}

.language_box {
  padding: 0px 0px;
  min-width: 100px;
  

}

.menu_box {
  min-width: 148px;
  max-height: 75vh;
  overflow: auto;
  background-color: #222143;
  border-radius: 8px;
  padding: 8px;
  box-shadow: rgba(0, 0, 0, 0.25) 0 4px 12px;
  font-size: 14px;
  z-index: 100;
}
.menu_item {
  display: flex;
  padding: 8px;
  color: inherit;
  text-decoration: none;
  font-weight: 400;
}
.language_item {
  font-size: 12px;
  padding: 10px 15px;
  cursor: pointer;
  text-align: center;
  display: flex;
  align-items: center;

  .van-image {
    height: 18px;
    width: 18px;
    margin-right: 8px;
  }
}

.language_item_active {
  color: #000;
  background: #f5f5f5;
}

.footer {
  height: 40px;
}

.tab_item {
  font-size: 12px;
  padding: 10px 15px;
  cursor: pointer;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: #666;
}

.tab_item_active {
  color: #000;
}

.language_item:hover {
  // background: #e5e5e5;
}

.imgfont {
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
  margin-left: 10px;
  color: #000;
  display: flex;
  cursor: pointer;
  align-items: center;

  img {
    width: 14px;
  }
}
</style>
